<script>
import events from './events'
export default {
    name: 'MultiTab',
    data() {
        return {
            fullPathList: [],
            pages: [],
            activeKey: '',
            newTabIndex: 0
        }
    },
    created() {
        // bind event
        events.$on('open', val => {
            if (!val) {
                throw new Error(`multi-tab: open tab ${val} err`)
            }
            this.activeKey = val
        }).$on('close', val => {
            if (!val) {
                this.closeThat(this.activeKey)
                return
            }
            this.closeThat(val)
        }).$on('rename', ({ key, name }) => {
            console.log('rename', key, name)
            try {
                const item = this.pages.find(item => item.path === key)
                item.meta.customTitle = name
                this.$forceUpdate()
            } catch (e) {
            }
        })
        this.pages.push(this.$route)
        this.fullPathList.push(this.$route.fullPath)
        this.selectedLastPath()
    },
    methods: {
        onEdit(targetKey, action) {
            this[action](targetKey)
        },
        remove(targetKey) {
            this.pages = this.pages.filter(page => page.fullPath !== targetKey)
            this.fullPathList = this.fullPathList.filter(path => path !== targetKey)
            // 判断当前标签是否关闭，若关闭则跳转到最后一个还存在的标签页
            if (!this.fullPathList.includes(this.activeKey)) {
                this.selectedLastPath()
            }
        },
        selectedLastPath() {
            this.activeKey = this.fullPathList[this.fullPathList.length - 1]
        },
        // content menu
        closeThat(e) {
            // 判断是否为最后一个标签页，如果是最后一个，则无法被关闭
            if (this.fullPathList.length > 1) {
                this.remove(e)
            } else {
                this.$message.info('这是最后一个标签了, 无法被关闭')
            }
        },
        closeLeft(e) {
            const currentIndex = this.fullPathList.indexOf(e)
            if (currentIndex > 0) {
                this.fullPathList.forEach((item, index) => {
                    if (index < currentIndex) {
                        this.remove(item)
                    }
                })
            } else {
                this.$message.info('左侧没有标签')
            }
        },
        closeRight(e) {
            const currentIndex = this.fullPathList.indexOf(e)
            if (currentIndex < (this.fullPathList.length - 1)) {
                this.fullPathList.forEach((item, index) => {
                    if (index > currentIndex) {
                        this.remove(item)
                    }
                })
            } else {
                this.$message.info('右侧没有标签')
            }
        },
        closeAll(e) {
            const currentIndex = this.fullPathList.indexOf(e)
            this.fullPathList.forEach((item, index) => {
                if (index !== currentIndex) {
                    this.remove(item)
                }
            })
        },
        closeMenuClick(key, route) {
            this[key](route)
        },
        renderTabPaneMenu(e) {
            return (
                <a-menu {...{ on: { click: ({ key, item, domEvent }) => { this.closeMenuClick(key, e) } } }}>
                    <a-menu-item key="closeThat">关闭当前标签</a-menu-item>
                    <a-menu-item key="closeRight">关闭右侧</a-menu-item>
                    <a-menu-item key="closeLeft">关闭左侧</a-menu-item>
                    <a-menu-item key="closeAll">关闭全部</a-menu-item>
                </a-menu>
            )
        },
        // render
        renderTabPane(title, keyPath) {
            const menu = this.renderTabPaneMenu(keyPath)
            return (
                <a-dropdown overlay={menu} trigger={['contextmenu']}>
                    <span style={{ userSelect: 'none' }}>{title}</span>
                </a-dropdown>
            )
        }
    },
    watch: {
        '$route': function (newVal) {
            this.activeKey = newVal.fullPath
            if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
                this.fullPathList.push(newVal.fullPath)
                this.pages.push(newVal)
            }
        },
        activeKey: function (newPathKey) {
            this.$router.push({ path: newPathKey })
        }
    },
    render() {
        const { onEdit, $data: { pages } } = this
        const panes = pages.map(page => {
            return (
                <a-tab-pane
                    style={{ height: 0 }}
                    tab={this.renderTabPane(page.meta.customTitle || page.meta.title, page.fullPath)}
                    key={page.fullPath} closable={pages.length > 1}
                >
                </a-tab-pane>)
        })
        return (
            <div class="ant-pro-multi-tab">
                <div class="ant-pro-multi-tab-wrapper">
                    <a-tabs
                        hideAdd
                        type={'editable-card'}
                        v-model={this.activeKey}
                        tabBarStyle={{ background: '#FFF', margin: 0, paddingLeft: '16px', paddingTop: '1px' }}
                        {...{ on: { edit: onEdit } }}>
                        {panes}
                    </a-tabs>
                </div>
            </div>
        )
    }
}
</script>
